import Vue from "vue"
import VueRouter from "vue-router";

const Foo = () => import("../components/Foo")
const Bar = () => import("../components/Bar")
const User = () => import("../components/User")
const FooMessage = () => import("../components/FooMessage")
const FooNews = () => import("../components/FooNews")
const Profile = () => import("../components/Profile")


const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

//1. Vue.use(插件)，安装插件
Vue.use(VueRouter)


const routes = [
  {
    path: "/profile",
    component: Profile,
    meta: {
      title: "档案"
    },
  },
  {
    path: '/foo', component: Foo,
    meta: {
      title: "首页"
    },
    //组件嵌套
    children: [{
      path: '',
      redirect: "news",
    },
      {
        path: "news",
        component: FooNews
      },
      {
        path: "message",
        component: FooMessage
      },
    ]
  },
  {
    path: '/bar',
    component: Bar,
    meta: {
      title: "关于"
    },
  },
  {
    //重定向
    path: '/',
    redirect: "/foo",
  },
  {
    path: "/user",
    component: User,
    meta: {
      title: "用户"
    },
  },
]

const router = new VueRouter({
  //配置路由和组件之间的应用关系
  routes,
  mode: "history"
})

//导航守卫，前置守卫
router.beforeEach(((to, from, next) => {
  //从form到to
  document.title = to.matched[0].meta.title
      next()
}))

//后置钩子()
/*router.afterEach(((to, from) => {
}))*/

export default router